<template>
<div id="" :city="city">
	<home-header :city="city"></home-header>
	<home-swiper :homeSwiper="homeSwiper"></home-swiper>
	<home-catalog :homeCatalog="homeCatalog"></home-catalog>
	<home-hot :homeHot="homeHot"></home-hot>
	<home-weekend :homeWeekend="homeWeekend"></home-weekend>
	<home-adv :homeAdv="homeAdv"></home-adv>
	<home-rec :homeRec="homeRec"></home-rec>
	<home-mod :homeMod="homeMod"></home-mod>
	<home-bot :homeBot="homeBot"></home-bot>
</div>
</template>

<script>
	import axios from 'axios'
	import homeHeader from './components/homeHeader'
	import homeSwiper from './components/homeSwiper'
	import homeCatalog from'./components/homeCatalog'
	import homeHot from'./components/homeHot'                         
	import homeAdv from'./components/homeAdv'
	import homeWeekend from'./components/homeWeekend'
	import homeRec from'./components/homeRec'
	import homeMod from'./components/homeMod'
	import homeBot from'./components/homeBot'
	export default {
		name:"Home",
		components:{
			homeHeader,
			homeSwiper,
			homeCatalog,
			homeHot,
			homeWeekend,
			homeAdv,
			homeRec,
			homeMod,
			homeBot
		},
		data(){
			return {
				city:"",
				homeAdv:"",
				homeSwiper:[],
				homeCatalog:[],
				homeHot:[],
				homeWeekend:[],
				homeRec:[],
				homeMod:[],
				homeBot:[]
			}
		}
		,
		methods:{
			gerHomeDate(){
				axios.get("/api/index.json")
					.then(this.getHomeDataSucc)
			},
			getHomeDataSucc(res){
			res=res.data
			if(res.data){
				const	data=res.data
				this.city=data.city
				this.homeSwiper=data.homeSwiper
				this.homeCatalog=data.homeCatalog
				this.homeHot=data.homeHot
				this.homeWeekend=data.homeWeekend
				this.homeAdv=data.homeAdv
				this.homeRec=data.homeRec
				this.homeMod=data.homeMod
				this.homeBot=data.homeBot
			}
			}
		},
		mounted(){
			this.gerHomeDate();
		}
	}
</script>

<style lang="stylus" scoped >

</style>